<template>
    <div class="layout">
        <el-container>
            <el-header height="70">智慧农场大数据平台</el-header>
            <el-container>
                <el-aside width="240px">
                    <el-menu :default-active="$router.currentRoute.name" class="el-menu-vertical-demo"
                        @open="handleOpen" @close="handleClose" background-color="rgb(4, 17, 35)"
                        text-color="#fff" active-text-color="#ffd04b" router>
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>公共数据</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="CcadNyjsSyj">
                                    <i class="el-icon-menu is-active"></i>
                                    <span slot="title">农业技术信息</span>
                                </el-menu-item>
                                <el-menu-item index="CcadFertBjba">
                                    <i class="el-icon-document"></i>
                                    <span slot="title">肥料部级备案数据</span>
                                </el-menu-item>
                                <el-menu-item index="CcadFertBjdj">
                                    <i class="el-icon-s-order"></i>
                                    <span slot="title">肥料部级登记产品</span>
                                </el-menu-item>
                                <el-menu-item index="CcadNjPpml">
                                    <i class="el-icon-s-comment"></i>
                                    <span slot="title">农机产品信息数据</span>
                                </el-menu-item>
                                <el-menu-item index="CcadPestReg">
                                    <i class="el-icon-s-claim"></i>
                                    <span slot="title">农药登记信息表</span>
                                </el-menu-item>
                                <el-menu-item index="CcadSeedApproval">
                                    <i class="el-icon-notebook-2"></i>
                                    <span slot="title">种子产品信息表</span>
                                </el-menu-item>
                                <el-menu-item index="WeatherHistory">
                                    <i class="el-icon-notebook-2"></i>
                                    <span slot="title">历史天气信息表</span>
                                </el-menu-item>
                                <el-menu-item index="CkbPestManager">
                                    <i class="el-icon-notebook-2"></i>
                                    <span slot="title">小麦虫害</span>
                                </el-menu-item>
                                <el-menu-item index="CkbDiseaseManager">
                                    <i class="el-icon-notebook-2"></i>
                                    <span slot="title">小麦病情</span>
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-data-analysis"></i>
                                <span>玛纳斯农场数据</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="MnssBch">
                                    <i class="el-icon-menu is-active"></i>
                                    <span slot="title">病虫害信息</span>
                                </el-menu-item>
                                <el-menu-item index="MnssJs">
                                    <i class="el-icon-menu is-active"></i>
                                    <span slot="title">浇水量信息</span>
                                </el-menu-item>
                                <el-menu-item index="MnssSf">
                                    <i class="el-icon-menu is-active"></i>
                                    <span slot="title">施肥量信息</span>
                                </el-menu-item>
                                <el-menu-item index="MnssTrsq">
                                    <i class="el-icon-menu is-active"></i>
                                    <span slot="title">土壤墒情信息</span>
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    name: 'HelloWorld',
    data() {
        return {
            activeIndex: '1',
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    }
}
</script>

<style scoped lang="less">
.layout {
    .el-container {
        .el-header {
            font-size: 18px;
            background-color: rgb(4, 17, 35);
            color: #fff;
            text-align: center;
            line-height: 70px;
        }

        .el-aside {
            background-color: rgb(4, 17, 35);
            color: #333;
            text-align: center;
            height: 885px;
        }

        .el-menu {
            border: none;
            padding-left: 15px;

            .el-menu-vertical-demo {
                width: 100%;
            }

            .el-menu-item {
                padding-left: 25px !important;
                text-align: left;
                padding: 0px 0px;
            }
        }

        .el-submenu {
            text-align: left;
        }

        .el-main {
            // background-color: #E9EEF3;
            background-image: url(../../img/img02.png);
            background-size: 30%;
            background-repeat: no-repeat;
            background-position: 50%;
            color: #333;
        }
    }
}
</style>